<template>
    <div class="homeContainer">
     <!-- 这里是轮播图 -->
     <mt-swipe :auto="4000" class="banner-wrap">
        <mt-swipe-item  v-for="item in swipeList" :key="item.id">
            <img :src="item.img_url" alt="">
        </mt-swipe-item>

    </mt-swipe>

     <!-- 九宫格 -->
       <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                        <router-link to="/home/newslist">
		                  <img src="../../images/2.png" alt="">	
                    <div class="mui-media-body">安师新闻</div>
                        </router-link>
                    </li>
                     <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                        <router-link to="/home/imagelist">
		                  <img src="../../images/8.png" alt="">
		                    <div class="mui-media-body">光影安师</div>
                        </router-link>
                    </li>
                     <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                          <router-link to="/home/goodslist">
		                  <img src="../../images/10.png" alt="">
		                    <div class="mui-media-body">安师商城</div>
                        </router-link>
                    </li>
                     <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                        <a href="#">
		                  <img src="../../images/7.png" alt="">
		                    <div class="mui-media-body">安师生鲜</div>
                        </a>
                    </li>
                     <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                        <a href="#">
		                  <img src="../../images/6.png" alt="">
		                    <div class="mui-media-body">天气预报</div>
                        </a>
                    </li>
                      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                        <a href="#">
		                  <img src="../../images/5.png" alt="">
		                    <div class="mui-media-body">记录安师</div>
                        </a>
                    </li>
                      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                        <a href="#">
		                  <img src="../../images/3.png" alt="">
		                    <div class="mui-media-body">安师美食</div>
                        </a>
                    </li>
                      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                        <a href="#">
		                  <img src="../../images/11.png" alt="">
		                    <div class="mui-media-body">安师健康</div>
                        </a>
                    </li>
                      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                        <a href="#">
		                  <img src="../../images/12.png" alt="">
		                    <div class="mui-media-body">考研交流</div>
                        </a>
                    </li>
		</ul> 
	</div>
</template>

<script>
export default {
        data(){
            return{
                swipeList:[],
            }
        },
        methods:{
                 getSwipeData(){
                    // 使用axios发出ajax请求
                    // 1.npm i axios -S
                    // 2.import 导入axios
                    // 3.把axios对象，挂载到Vue.prototype身上，因为他不支持Vue.use()的语法去挂载
                    // this.$ajax({})
                    this.$ajax({
                        method:'get',
                        url:'/sliderlist',
                    }).then(response => {
                        console.log(response);
                        var data = response.data;
                        if(data.Status == 0){  //服务器正确响应，并发了数据
                            this.swipeList = data.Data;
                    
                        }else{
                            Toast('无法加载轮播图数据');
                        }
                    })
                }
        },
        created(){
            this.getSwipeData();
        },
    
}
</script>

<style lang="less">
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  padding: 8px;
}
.homeContainer{
    height:200px;
   .banner-wrap{
       height: 200px;
    .mint-swipe-item {
        position: relative;
        height:100%;
      
         img{
            position: absolute;
           height:100%;
           width: 100%;
    }
   }

   }


.mui-grid-view.mui-grid-9{
    padding-bottom:50px;
}
  .mui-table-view-cell img{
      width:3.2rem;
  }
}
</style>